require(['./config'], () => {
    require(['template', 'url', 'header', 'footer','zoom', 'fly'], (template, url, header) => {
      class Detail {
        constructor () {
          this.getDetailById().then(() => {
            this.renderDetail()
            this.zoom()
            this.addToCart()
          })
        }
        getDetailById () {
          // 先从地址栏里拿到id
          const id = Number(window.location.search.slice(4))
          // 根据id请求详情页接口
          return new Promise(resolve => {
            $.get(`http://rap2api.taobao.org/app/mock/239606/xianqin`, { id }, resp => {
              if (resp.code === 200) {
                const { detail } = resp.body
                // 由于咱们现在用的rap2假数据，接口没有返回id，所以我们手动加上id
                // !!! 注意：真实接口不需要加id
                // 把detail展开，然后加上id，构成一个新的对象，给this.detail
                this.detail = {
                  ...detail,
                  id
                }
                resolve()
              }
            })
          })
          
        }
        // 根据this.detail渲染也米娜
        renderDetail () {
          $('#design').html(template('designTemplate', { ...this.detail }))
        }
        // 放大镜效果，利用elevateZoom插件
        zoom () {
          $('.zoom-image').elevateZoom({
            gallery: 'gal1'
          })
        }
        // 加入购物车
        addToCart () {
          $('#add-to-cart-btn').on('click', (e) => {
            this.fly(e)
            let cart = localStorage.getItem('cart')
            if (cart) {
              cart = JSON.parse(cart)
              const isExist = cart.some(shop => shop.id === this.detail.id)
              if (isExist) {
                    cart = cart.map(shop => {
                      if (shop.id === this.detail.id) shop.count++
                      return shop
                    })
              }else{
                cart.push({ 
                  ...this.detail, 
                  count: 1,
                 check:true 
                })
              }
              localStorage.setItem('cart',JSON.stringify(cart))
            }else {
              localStorage.setItem('cart',JSON.stringify([{
                ...this.detail,
                count:1,
                check:true
              }]))
            }
          })
        }
        // 飞入购物车抛物线效果
        fly (e) {
          $(`<img src="${this.detail.img[0]}" style="width: 30px; height: 30px;border-radius: 50%">`).fly({
            start:{
              left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
              top: e.clientY,  //开始位置（必填）
            },
            end:{
              left: $('#right-cart').offset().left - $(window).scrollLeft(), //结束位置（必填）
              top: $('#right-cart').offset().top - $(window).scrollTop(),  //结束位置（必填）
              // width: 0, //结束时宽度
              // height: 0, //结束时高度
            },
            speed: 0.7, //越大越快，默认1.2
            vertex_Rtop: 20, //运动轨迹最高点top值，默认20
            onEnd: function(){
              // 加入购物车成功重新调用一次header的计算数量的方法
               header.gwcshulian()
              $('#cart-num').html($('#cart-num').html() -0  )
              this.destroy()
            } //结束回调
          })
        }
      }
      new Detail()
    })
  })

